/*
 * @Description: 乘车消费账单界面
 * @Author: tao.xie
 * @Date: 2019-03-29 11:38:51
 * @Last Modified by: yingying.fan
 * @Last Modified time: 2019-04-26 18:45:35
 */
<template>
  <div style="height:100%;overflow:hidden;">

    <title-bar
      titleText="账单详情"
      :needBorder="true"
    ></title-bar>

    <route-bill-main
      :info-list="infoList"
      :detail-icon="detailIcon"
      :detail-msg="routeBill.title"
      :price="payPrice"
      :baseIconTheme="moneyPay"
      style="position:relative;overflow-y:auto;"
      :wrapperTopStyle="billMainTopStyle"
    >
      <!-- <div
        class="bottom-blank"
        v-if="buttonShow"
      ></div> -->
      <div
        class="bottom-wrapper flex-v flex-vc"
        slot="bottom"
        v-if="buttonShow"
      >
        <span v-if="unpayCount>0">支付失败行程超过{{unpayCount}}笔，将暂时关闭您的扫码乘车功能</span>
        <span v-if="unpayCount===0">*为不影响您的日常使用，请及时处理支付失败行程。</span>
        <button
          class="baseBgColorWithActive"
          @click="pay"
        >重新支付</button>
      </div>
    </route-bill-main>
  </div>
</template>

<script>
import Vue from 'vue'
import TitleBar from '@/components/titlebar/TitleBar'
import { getRouteBill, getUnpayCountConfig } from '../api/api.js'
import RouteBillMain from '../components/RouteBillMain'
import { REFUND_PART, FAIL, SUCCESS, MAKEUP, REFUND, TRADING } from '../constants/TradeStatus.js'
import TradeBills from '../components/TradeBillsJS.js'
import { getUrlParamByKey } from 'vue-xiaobu-utils'
import PayModeJS from '../../payorderlist/components/paymode/PayModeJS.js'
import { BUS_CONSUME } from '../constants/TradeType.js'
export default {
  components: {
    'route-bill-main': RouteBillMain,
    'title-bar': TitleBar
  },
  data() {
    return {
      detailIcon: require('../assets/bus.png'),
      folderName: window.folderName || 'buscard-app/',
      infoList: [],
      routeBill: {
        payFee: ''
      },
      unpayCount: null
    }
  },
  computed: {
    buttonShow() {
      // 重新支付区域块显示逻辑： 条件1.非补扣类型  条件2.订单状态为交易失败
      return !this.routeBill.isSupplement && this.routeBill.state === FAIL
    },
    // 展示支付金额
    payPrice() {
      if (this.routeBill.state !== null) {
        return this.moneyPay ? '-' + this.routeBill.payFee : this.routeBill.payFee
      } else {
        return ''
      }
    },
    moneyPay() {
      // 此字段用于标记是否扣了钱了，即显示-2.0元还是2.0元,图标显示蓝色的还是灰色的底色
      // 不扣成功或者交易成功
      // return this.routeBill.state === MAKEUP || this.routeBill.state === SUCCESS
      return this.routeBill.state !== FAIL && this.routeBill.state !== MAKEUP
    },
    billMainTopStyle() {
      return this.buttonShow ? 'min-height:calc(100% - 3.333333rem)' : ''
    }
  },
  mounted() {
    this._getRouteBill(getUrlParamByKey('tradeno'))
    Vue.$EventBus.$on('look', () => {
      this.look()
    })
    getUnpayCountConfig().then(count => {
      this.unpayCount = count
    })
  },
  methods: {
    _getRouteBill: async function (tradeno) {
      try {
        this.routeBill = await getRouteBill(tradeno)

        let copyinfolist = []
        copyinfolist.push({
          infoName: '支付状态',
          infoValue: this.parsePayResult()
        })
        if (this.routeBill.payName) {
          copyinfolist.push({
            infoName: '支付方式',
            infoValue: this.routeBill.payName + (this.routeBill.bankCardNo ? ' (' + this.routeBill.bankCardNo + ')' : '')
          })
        }
        copyinfolist.push({
          // 补扣显示创建时间，其他显示乘车时间
          infoName: this.routeBill.isSupplement ? '创建时间' : '乘车时间',
          infoValue: this.routeBill.tradeTime
        })
        if (this.routeBill.payTime) {
          copyinfolist.push({
            infoName: '支付时间',
            infoValue: this.routeBill.payTime
          })
        }
        copyinfolist.push({
          infoName: '账单编号',
          infoValue: this.routeBill.tradeNo
        })

        if (this.routeBill.tradeBills && this.routeBill.tradeBills.length > 0) {
          copyinfolist.push({
            infoName: '关联账单',
            infoValue: '查看',
            isButton: true,
            eventName: 'look'
          })
        }

        this.infoList = copyinfolist
      } catch (err) { }
    },
    parsePayResult() {
      // if (!this.routeBill.isSupplement) {
      let state = this.routeBill.state
      switch (state) {
        case REFUND_PART:
          return '支付成功(部分退款)'
        case FAIL:
          return '支付失败'
        case REFUND:
          return '支付成功(已退款)'
        case SUCCESS:
          return '支付成功'
        case TRADING:
          return '交易中'
        case MAKEUP:
          return '支付失败(已补扣)'
        default:
          return '待支付'
        // break
      }
      // } else {
      //   // 补扣类型
      //   return this.routeBill.state === SUCCESS ? '支付成功' : '支付失败'
      // }
    },
    pay() {
      // 重新支付
      let gotoUrl = 'xbapp://goback/' + this.folderName + 'consumelist.html?_tv=true&_rv=true'
      PayModeJS.show(this.routeBill.posBillNo, this.routeBill.payFee, gotoUrl)
    },
    look() {
      // 查看关联行程
      TradeBills.show(this.routeBill.tradeBills, BUS_CONSUME)
    }
  }
}
</script>

<style scoped>
.wrapper-top {
  min-height: calc(100% - 240px);
}
.bottom-blank {
  height: 210px;
}
.bottom-wrapper {
  /* position: absolute;
  left: 0;
  bottom: 0; */
  padding: 40px 30px 60px 30px;
}
.bottom-wrapper span {
  height: 70px;
  color: #999;
  font-size: 11px; /*no*/
  line-height: 15px; /*no*/
}

.bottom-wrapper button {
  width: 690px;
  height: 80px;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 15px; /*no*/
  line-height: 21px; /*no*/
  /* margin-top: 40px; */
}
</style>
